<template>
<<<<<<< HEAD
  <div class="ft-player" v-show="bottomBar" >
    <audio :src="audio.songUrl" autoplay id="audioPlay" @timeupdate="change()" ></audio>
=======
  <div class="ft-player" v-show="!flag||isPaly" >
    <audio :src="audio.songUrl" autoplay id="audioPlay"  loop="loop"></audio>
>>>>>>> 7dd98ad4f10b0d0fc1a7994a24c127972341b2d9
    <a class="ft-go-info" id="goplay" @click="hideDetailPlayer()" >
      <div class="ft-left">
        <img :src="audio.imgUrl" v-if="audio.imgUrl" alt>
        <img src="../assets/images/b.png" v-else alt>
      </div>
      <div class="ft-center">
        <p class="ft-desc ft-songName">{{audio.song_name}}</p>
        <p class="ft-desc ft-userName">{{audio.singer}}</p>
      </div> 
    </a>
    <div class="ft-right">
      <i 
        class="ft-btnPalyPause-2"
        @click="toggleStatus()"
        :class="{'player-Pause':isPlay}"
        v-if="isPlay"
      ></i>
      <i class="ft-btnPalyPause-1" @click="toggleStatus()" :class="{'player-Pause':isPlay}" v-else ></i>
      <i class="ft-btnNext" @click="nextSong()"></i>
      <!-- <i class="ft-icon-download"></i> -->
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { mapActions } from "vuex";
export default {
  computed: {
    ...mapGetters(["audio", "audioLoadding", "showPlayer", "isPlay","bottomBar"])
  },
  methods: {
  //  ...mapActions(['next']),
    toggleStatus() {
      if (this.isPlay) {
        console.log(1);
        document.getElementById("audioPlay").pause();
      } else {
        document.getElementById("audioPlay").play();
      }
      this.$store.commit("isPlay", !this.isPlay);
    },
    nextSong(){
      console.log("我们即将为你播放下一曲歌")
      //这里我想办法把该歌曲的指针指向下一首歌曲，改变他们的索引hash值即可
      // this.next()
      this.$store.dispatch('next')
      this.$store.commit("isPlay", true);
    },
     hideDetailPlayer(){
        this.$store.commit("showDetailPlayer",this.bottomBar)
        console.log(this.bottomBar,'这是底部播放栏')
      },
      change(){
        var time=document.getElementById('audioPlay').currentTime
        if(this.audio.currentFlag){
          console.log('我是从store中传过来的改变时间:',this.audio.currentLength)
          document.getElementById('audioPaly').currentTime=this.audio.currentLength;
          this.$store.commit('setCurrent',false)
           console.log('我又将store中currentFlag改变了:',this.audio.currentFlag)
        }else{
            // console.log(this.audio.currentFlag)
          this.$store.commit('setAudioTime',time);
        }
      }
  }
};
</script>
<style>
.ft-player {
  width: 100%;
  height: 67px;
  position: fixed;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.ft-go-info {
  width: 65%;
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
}

.ft-left {
  width: 67px;
  height: 67px;
  margin: 5px;
  display: inline-block;
  vertical-align: middle;
}
.ft-left img {
  /* z-index:auto; */
  border-radius: 2px;
  object-fit:scale-down;
  width: 100%;
  overflow: hidden;
  height: 55px;
}
.ft-center {
  width: 65%;
  display: inline-block;
  vertical-align: middle;
}
.ft-desc {
  width: 100%;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  color: #fff;
  margin-top: -2px;
  margin-bottom: 3px;
}
.ft-right {
  position: absolute;
  top: 20px;
  right: 15px;
}
.ft-btnPalyPause-1 {
  background: url("../assets/images/play_icon.png") no-repeat center;
}
.ft-btnNext {
  background: url("../assets/images/next_icon.png") no-repeat center;
}
.ft-btnPalyPause-2 {
  background: url("../assets/images/pause_icon.png") no-repeat center;
}
.ft-btnPalyPause-1,
.ft-btnPalyPause-2,
.ft-btnNext {
  width: 25px;
  height: 33px;
  margin-right: 20px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background-size: 35px 35px;
}
</style>

